<template>
  <div class="q-pa-md row">
    <el-page-header @back="goBack">
    </el-page-header>
    <div style="text-align: center;margin-bottom: 20px">
        <span style="color: black;
                    font-size: 30px;
                    font-weight: 800;
                    font-family: 华文仿宋;">
                    诊断结果
                </span>
    </div>
    <div style="text-align: center;margin-bottom:10px">
      <el-progress type="circle" :percentage="progress"></el-progress>
    </div>
    <div style="margin-bottom: 20px"></div>
    <el-card class="box-card" shadow="always" style="margin-bottom: 20px">
      <el-descriptions title="舌像诊断" direction="vertical" :column="4" border>
        <el-descriptions-item label="舌色">
          <el-tag size="small">{{ analysis.data.color }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="齿痕">{{ analysis.data.crack }}</el-descriptions-item>
        <el-descriptions-item label="裂纹" :span="2">{{ analysis.data.indentation }}</el-descriptions-item>
        <el-descriptions-item label="诊断结果">{{ analysis.data.djagnosis }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="box-card" shadow="always">
      <div slot="header" class="clearfix">
        <span style="font-size: 25px">食物推荐</span>
      </div>
      <el-collapse v-for="(re,key) in content" :key="key" v-model="activeName">
        <el-collapse-item :title="re.name" :name="re.name">
          <el-descriptions title="食物详情" size="medium" border>
            <el-descriptions-item label="养生功效">
              {{ re.effect }}
            </el-descriptions-item>
            <el-descriptions-item label="料理">{{ re.cook }}</el-descriptions-item>
            <el-descriptions-item label="营养与功效">{{ re.nutrition }}</el-descriptions-item>
            <el-descriptions-item label="食验疗方">{{ re.prescription }}</el-descriptions-item>
            <el-descriptions-item label="养生保健食谱">{{ re.recipe }}</el-descriptions-item>
            <el-descriptions-item label="专家提醒">{{ re.remind }}</el-descriptions-item>
            <el-descriptions-item label="贮藏方法">{{ re.stored }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>

    </el-card>
    <div style="text-align: center;margin-top:10px">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="totalnum"
          :page-size="pagesize"
          :current-page.sync="currentpage"
          @current-change="pagechange"
      >
      </el-pagination>
    </div>
    <div style="margin-bottom: 20px"></div>

    <span slot="footer" class="dialog-footer">
 <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px">请对本次诊断评分</span>
        </div>
        <el-rate
            v-model="value"
            show-text>
        </el-rate>
      </el-card>
  </span>
    <div style="margin-bottom: 20px"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import bus from "@/api/index/bus.js";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Result",
  components: {
    Footer
  },
  data() {
    return {
      analysis: "",
      activeName: '',
      value: null,
      totalnum: 0,//药物总条数
      pagesize: 10,//每页条数
      currentpage: 1,
      result: [//分析出来的病及其对应的分析
        {
          dish: "大枣粥",
          method: "大枣10-20颗，大米100克，同煮粥，用冰糖或白糖调味食用。有健脾胃，补气血作用。适合于病后或年老体弱、体虚、胃弱食少、大便塘稀、营养不良、气血不足、慢性肝炎、血小板减少、过敏性紫癫者常食。",
          efficacy: "健胃补血"
        },
        {
          dish: "花生衣红枣汁",
          method: "花生米100克温水泡半小时，取其红衣与干红枣50克同煎半小时，加适量红糖调味食用。一日内分3次服完。适用于产后病后血虚、营养性贫血、恶性贫血、血小板减少性紫癫，癌症经放射治疗、化疗后血象异常等症的辅助食疗",
          efficacy: "补气养胃"
        },
        {
          dish: "参枣米饭",
          method: "党参10-20克，大枣20颗，同水煎半小时，去党参渣。糯米250克蒸饭，大枣铺于饭上，枣参汤加白糖50克煎为浓汁淋在饭上即可食用。有补气养胃之功效。适用于体虚气弱、乏力倦怠、心悸失眠、食欲不振.肢体浮肿、大便塘薄等症的辅助食疗。",
          efficacy: "补血益气"
        }
      ],
      proscription: [{
        keys: "早期症状",
        values: "心血管疾病多起病隐匿，患者在早期可以无特异性症状，有的表现为不明显的胸闷、心悸、乏力、头晕等"
      },
        {
          keys: "典型症状",
          values: "心血管疾病种类比较多，主要常见的症状有胸闷、胸痛、心悸、水肿、头痛、头晕、活动耐量下降、呼吸困难、晕厥，其他还包括发组、咳嗽、眩晕、上腹胀痛、恶心、呕吐等。多数症状也见于其他系统疾病，因此应仔细鉴别"
        },
        {keys: "伴随症状", values: "有的心血管疾病伴有乏力、食欲下降、发热、咳痰等症状"},
      ],
      content: [],
      allcontent: [],
      form: {
        name: '',
        personality: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      progress: 0,
    }
  },
  watch: {
    'currentpage': function () {//用来监听数据的变化
      let start = (this.currentpage - 1) * this.pagesize
      let end = (this.currentpage) * this.pagesize
      this.content = this.allcontent.slice(start, end)
    },
  },
  // 用完别忘了销毁
  beforeDestroy() {
    bus.$off('passProductType')
  },
  created() {
    setInterval(this.valChange, 1000);
    this.analysis = this.$route.params.data
    console.log(this.analysis)
    this.intelligent_analysis(this.analysis)
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    pagechange() {
      console.log("dada")
    },
    intelligent_analysis(value) {
      // console.log("啦啦啦啦啦:" + value)
      console.log(value.data.food)
      for (var obj in value.data.food) {
        if (value.data.food[obj] === "nan")
          value.data.food[obj] = "无"
      }
      this.allcontent = value.data.food
      //计算是从第几条到第几条:
      let start = (this.currentpage - 1) * this.pagesize
      let end = (this.currentpage) * this.pagesize
      this.content = this.allcontent.slice(start, end)
      this.totalnum = this.allcontent.length
    },
    valChange() {
      this.progress += 15;
      if (this.progress > 100)
        this.progress = 100;
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 16px;
}

.box-card.id2.el-alert {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}
</style>
